<template>
  <div>
    <div class="security-cell">
      <div class="status-container">
        <a-icon class="icon" :type="statusIconType" theme="twoTone" :two-tone-color="twoToneColor" />
        <div>{{ statusText }}</div>
      </div>
      <h4 class="type">{{ securityType }}</h4>
      <p class="description">
        {{ securityDescription }}
      </p>
      <a class="action" @click="actionClick">{{ actionTitle }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SecurityCell',
  components: {},
  props: {
    twoToneColor: {
      type: String,
      required: false,
      default: '#52c41a',
    },

    statusIconType: {
      type: String,
      required: false,
      default: undefined,
    },

    statusText: {
      type: String,
      required: false,
      default: undefined,
    },

    securityType: {
      type: String,
      required: false,
      default: undefined,
    },
    securityDescription: {
      type: String,
      required: false,
      default: undefined,
    },
    actionTitle: {
      type: String,
      required: false,
      default: undefined,
    },
    actionItemClick: {
      type: Function,
      required: false,
      default: undefined,
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    actionClick(event) {
      if (this.$props && this.$props.actionItemClick) {
        this.$props.actionItemClick(event)
      }
    },
  },
}
</script>

<style scoped lang="less">
.security-cell {
  display: flex;
  flex-direction: row;
  margin: var(--margin-medium);
  justify-content: space-between;
  align-items: center;
}

.security-cell .status-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: fit-content;
  margin: var(--margin-x-small) var(--margin-x-small);
}

.security-cell .status-container .icon {
  padding: var(--padding-xx-small) var(--padding-xx-small);
}

.security-cell .type {
  padding: var(--padding-x-small) var(--padding-x-small);
  min-width: fit-content;
}

.security-cell .description {
  width: 100%;
  line-height: 1.5;
}

.security-cell .action {
  color: var(--r-primary-color);
  font-weight: 500;
  min-width: fit-content;
  margin: var(--margin-x-small) var(--margin-x-small);
}
</style>
